
@import "task13_framework";
@import "color-framework";
@import "variablae-value-framework";

body{
  background-color:$dark-blue-color ;
}

header{
  position: sticky;
  left: 0;
  top: 0;
  background: #29bde0;
}

.header{
   @extend %allot;
   height: 3.1rem;
  padding: 0 $value-gap;

  .return{
    background-image: url("images_2/return.png");
    background-repeat: no-repeat;
    background-size: 100%;
    width: 28px;
    height: 30px;


    }

  .close{
    @extend .return;
    background-image:url("images_2/close.png");
  }
}


.nav{
    @include  space-between($parallel,$allot,$vertical-center);
    height: 3rem;
    background-color: rgba(255,255,255,0.5);
    padding: 0 $value-gap;
    position: relative;

  audio{
    position: absolute;
    top: 1px;
    right: 10px;
    transform: rotate(180deg);
    opacity: .0;
  }
 .round{
      @extend %vertical-center;
      width: 35px;
      height: 35px;
      background-color: $orange-color;
      border-radius: 50%;

    .triangle{
        @include triangle(9px,18px,9px,#ffffff)
    }
      }

}

.triangle-t{
   @include  triangle-x(10px,5px,5px,rgba(255,255,255,0.5));
  margin-left:$value-gap;
}

.voice{
  font-size:13px;
  color:$white-color;
  text-align: $left;
  margin-left: 15px;
  letter-spacing: 2px;
}


.main{
  margin-top: 5vw;

}

.container{
  @extend %allot;
  margin: 3vh  5vw;
  flex-wrap: wrap-reverse;
  padding-bottom: 8.5rem;

  .primary{

    width: 21.75vw;
    border: 0.55vw solid white;

    .t-box{
      height: 18vw;
      background: #f5c97b;
      @extend %vertical-center;
    }
    .b-box{
      height:5vw;
      background-color:#83b09a;
      @extend %vertical-center;

    }
  }

.main:hover .sprite{
  visibility: visible;
}

  .sprite{
    display: flex;
    padding-top: 2.1vw;
    visibility: hidden;

    .first{
      background-size: 22vw;
      background-image: url(images_2/sprite.png);
      width: 5.05vw;
      height: 5.05vw;
      background-position: -0px -1px;
      margin-right: 0.85vw;
    }
    .second{
      @extend .first;
      background-position: -27.7vw -2px;
    }

    .third{
      @extend .first;
      background-position: -33vw -0px;
    }
    .fourth{
      @extend .first;
      background-position: -38.7vw -1px;
      margin-right: 0;
    }

  }
}

footer {
  @extend %vertical-center;
  width: 100%;
  height: 120px;
  position: fixed;
  bottom: 0;
  background: $dark-blue-color;
  flex-direction: column;


}
  button{
    width: 100%;
    border: 0;
    left: 0;
    right: 0;
    padding: 18px 34vw;
    background: $orange-color;
    font-size: 23px;
    color: white;
  }

